<template>
  <div class="login-container">
    <div class="login-box">
      <el-card class="login-card">
        <template #header>
          <div class="login-header">
            <!-- <img src="@/assets/logo.png" class="logo" alt="logo"> -->
            <h2 class="login-title">系统登录</h2>
            <p class="login-subtitle">欢迎回来，请输入您的账号密码</p>
          </div>
        </template>

        <el-form
          :model="loginForm"
          :rules="rules"
          ref="loginFormRef"
          @keyup.enter="handleLogin"
        >
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="请输入用户名"
              :prefix-icon="User"
              size="large"
              clearable
              @focus="handleFocus"
            />
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              :prefix-icon="Lock"
              show-password
              size="large"
              clearable
              @focus="handleFocus"
            />
          </el-form-item>

          <!-- <div class="login-options">
            <el-checkbox v-model="rememberMe">记住密码</el-checkbox>
            <el-link type="primary" :underline="false">忘记密码？</el-link>
          </div> -->

          <el-form-item>
            <el-button
              type="primary"
              @click="handleLogin"
              class="login-button"
              size="large"
              :loading="loading"
            >
              {{ loading ? '登录中...' : '登录' }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { getLogin } from '@/api/Home.js'
import { useRouter } from 'vue-router'

const router = useRouter()
const loginFormRef = ref(null)
const loading = ref(false)
const rememberMe = ref(false)

const loginForm = reactive({
  username: '',
  password: '',
})

const getLoginInfo = async () => {
  const { username, password } = loginForm
  const params = {
    uid: username,
    password: password,
  }
  console.log('🚀 ~ getLoginInfo ~ params:', params)
  const res = await getLogin(params)
  if (res.data.code == 0) {
    localStorage.setItem('itoken', res.data.token)
    // localStorage.setItem('itoken', 'djgjkasgifhafo56fa486f4867865')
    router.replace('home')
    ElMessage.success('登录成功')
    loading.value = false
  }
}
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' },
  ],
}

// 处理表单项获取焦点时清除验证错误
const handleFocus = (e) => {
  const field = e.target.getAttribute('name')
  loginFormRef.value?.clearValidate(field)
}

const handleLogin = () => {
  if (loading.value) return

  loginFormRef.value?.validate((valid) => {
    if (valid) {
      loading.value = true
      // 模拟登录请求
      // setTimeout(() => {

      // 这里添加实际登录逻辑
      // }, 1500)
      getLoginInfo()
    } else {
      ElMessage.error('请填写正确的登录信息')
    }
  })
}
</script>

<style scoped>
.login-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('@/assets/login.jpg') no-repeat center center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.login-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.4),
    rgba(0, 0, 0, 0.2)
  );
  backdrop-filter: blur(1px);
}

.login-box {
  position: relative;
  z-index: 1;
  width: 420px;
}

.login-card {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.login-card:hover {
  transform: none;
}

.login-header {
  text-align: center;
  padding: 20px 0;
}

.logo {
  height: 45px;
  margin-bottom: 15px;
  object-fit: contain;
}

.login-title {
  margin: 0;
  color: #2c3e50;
  font-size: 26px;
  font-weight: 600;
}

.login-subtitle {
  margin: 12px 0 0;
  color: #606266;
  font-size: 14px;
}

.login-button {
  width: 100%;
  height: 44px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  margin-top: 10px;
}

.login-button:hover {
  transform: none;
  opacity: 0.9;
  transition: opacity 0.3s;
}
</style>
